<template>
  <view class="appointment">
    <uv-navbar
      title="入住信息"
      @leftClick="leftClick"
      bg-color="linear-gradient(to right, #D2F1DE 0%, #E3F6E8 50% ,#D2F1DE 100%)"
      :fixed="true"
      placeholder
    ></uv-navbar>
    <view class="appointment-xinxi">
      <view class="xuan-o" @click="$refs.calendars.open()">
        <text class="xuan-o-text">预约日期</text>
        <view class="xuan-o-left">
          <text>{{ value === "" ? "请选择" : value }}</text>
          <uv-icon name="arrow-right" size="30rpx" color="#909399"></uv-icon>
        </view>
      </view>
      <view class="xuan-o" @click="$refs.picker.open()">
        <text class="xuan-o-text">入住人数</text>
        <view class="xuan-o-left">
          <text>{{ num === "" ? "请选择" : num }}</text>
          <uv-icon name="arrow-right" size="30rpx" color="#909399"></uv-icon>
        </view>
      </view>
      <view class="xuan-o">
        <view class="xuan-o-text">联系人</view>
        <view style="margin-right: 20rpx">
          <u-input type="text" input-align="right" v-model="value1" style="width: auto" />
        </view>
      </view>
      <view class="xuan-o">
        <view class="xuan-o-text">联系电话</view>
        <view style="margin-right: 20rpx">
          <u-input type="number" input-align="right" v-model="value2" style="width: auto" />
        </view>
      </view>
    </view>
    <view class="caterDetail-btns">
      <button
        class="caterDetail-btn"
        style="background: linear-gradient(to right, #00a579, #057849)"
        @click="Purchase"
      >
        确认购买
      </button>
    </view>

    <!-- 入住时间 -->
    <uv-calendar ref="calendars" @confirm="confirms" :closeOnClickOverlay="true" />

    <!-- 选择器 -->
    <uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      value1: "",
      value2: "",
      num: "",
      columns: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]],
      sku_id: 0,
      goods_id: 0,
    };
  },
  onLoad(options) {
    this.goods_id = options.goods_id;
    this.sku_id = options.sku_id;
  },
  methods: {
    leftClick() {
      uni.navigateBack();
    },
    confirm(e) {
      this.num = e.value[0];
    },
    confirms(e) {
      this.value = e[0];
    },

    //确认购买
    Purchase() {
      if (!this.value) {
        uni.showToast({
          icon: "none",
          title: "请选择日期",
        });
      } else if (!this.num) {
        uni.showToast({
          icon: "none",
          title: "请选择入住人数",
        });
      } else if (!this.value1) {
        uni.showToast({
          icon: "none",
          title: "请填写联系人",
        });
      } else if (!this.value2) {
        uni.showToast({
          icon: "none",
          title: "请填写联系电话",
        });
      } else {
        if (this.value2) {
          if (!/^1[3456789]\d{9}$/.test(this.value2)) {
            uni.showToast({
              icon: "none",
              title: "请填写正确手机号",
            });
          } else {
            let page = [];
            let obj = {
              day: this.value,
              num: this.num,
              name: this.value1,
              phone: this.value2,
              sku_id: this.sku_id,
              type: "gmmp",
            };
            uni.navigateTo({
              url: `/liu/pages/confirmOrder?data=${JSON.stringify(obj)}&type=lvyou&goods_id=${
                this.goods_id
              }`,
            });
          }
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.u-input {
  padding-right: 30rpx !important;
}

.appointment {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #d3f1de 0%, #f4f6f5 30%, #f6f6f6 100%);
  position: relative;

  .appointment-xinxi {
    // padding-top: 44px;
    width: 94vw;
    margin: 20rpx 3vw;
    border-radius: 20rpx;
    height: 440rpx;
    background-color: #fff;

    .xuan-o {
      width: 94vw;
      margin: 20rpx 3vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 96rpx;

      .xuan-o-text {
        font-family: Source Han Sans CN;
        font-weight: 550;
        font-size: 30rpx;
        color: #121314;
      }

      .xuan-o-left {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 40rpx;
      }
    }
  }

  .caterDetail-btns {
    width: 94vw;
    margin: 20rpx 3vw;
    padding: 0 3vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 30rpx;

    .caterDetail-btn {
      width: 100%;
      height: 80rpx;
      border-radius: 40rpx;
    }
  }
}
</style>
